<template>
	<view class="car-box left clearfix bai">
		<view class="car-left left clearfix">
			<swiper class="swiper" indicator-color="rgba(255,255,255,.3)" indicator-active-color="rgba(100,100,100,.3)" circular :indicator-dots="true" :autoplay="true" :interval="5000"
							:duration="500">
				<swiper-item v-for="(item,index) in swiperItem">
					<view class="swiper-item left">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
				</swiper-item>
				
			</swiper>
		</view>
		
		<view class="car-right right clearfix">
			
			<view class="car-right-item left" @click="navigateToPage('/pages/course/index')">
				<view class="car-right-text left">
					<text>新手指南</text>
					<text>魔方新手必读指南</text>
				</view>
			</view>
			
			<view class="car-right-item2 left" @click="navigateToPage('/pages/audio/index')">
				<view class="car-right-text2 left">
					<text>音频创作</text>
					<text>一键配音实现快速赚钱</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<style scoped>
	.car-right-text2 text:last-child{color:#fff;font-size:14px;}
	.car-right-text2 text:first-child{color:#fff;font-weight:500;font-size:18px;}
	.car-right-text2 text{float:left;width:100%;text-align: center;line-height:30px;color:#fff;}
	.car-right-text2{width:50%;height:50px;margin-top:17px;margin-left:20px;}
	
	.car-right-text text:last-child{color:#999;font-size:14px;}
	.car-right-text text:first-child{color:#444;font-weight:500;font-size:18px;}
	.car-right-text text{float:left;width:100%;text-align: center;line-height:30px;}
	.car-right-text{width:50%;height:50px;margin-top:17px;margin-left:20px;}
	.car-right-item{width:100%;height:90px;background:url('/static/images/xinshouzhiyin.jpg') no-repeat center center;background-size:cover;border-radius: 10px;margin-bottom:5px;overflow: hidden;cursor:pointer;}
	.car-right-item2{width:100%;height:90px;background:url('/static/images/keji1.jpg') no-repeat center center;background-size:cover;border-radius: 10px;margin-top:12px;margin-bottom:5px;overflow: hidden;cursor:pointer;}
	.swiper-item image{width:100%;height:100%;border-radius: 10px;}
	.swiper-item{width:100%;height:100%;border-radius: 10px;overflow: hidden;}
	.swiper{width:100%;height:100%;border-radius: 10px;}
	.car-right{width:25%;height:100%;}
	.car-left{width:73%;height:100%;}
	.car-box{height:200px;}
</style>

<script>
	export default {
		name:"carousel",
		data() {
			return {
				swiperItem:[
					{
						image:'/static/images/lunbo1.png',
						url:'',
						title:''
					},
					{
						image:'/static/images/lunbo2.jpg',
						url:'',
						title:''
					},
					{
						image:'/static/images/lunbo3.png',
						url:'',
						title:''
					}
				]
			};
		},
		methods:{
			//跳转页面
			navigateToPage(page){
				uni.navigateTo({
					url:page
				})
			}
		}
	}
</script>
